<template>
	<view class="content bgc-fff pl30 pr30 real_name_box">
		<u-form :model="form" ref="uForm" label-position="left" label-width="250">
			<u-form-item required label="持卡人姓名" prop="cardName">
				<u-input v-model="form.cardName" :cursor-spacing="50" input-align="right" placeholder="请填写姓名" />
			</u-form-item>
			
			<u-form-item required label="用户类型" prop="cardType">
				<u-radio-group v-model="form.cardType" active-color="#23bbb3">
					<u-radio v-for="item in userTypeList" :key="item.value" :name="item.value" label-size="27" icon-size="22">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item required label="银行卡号" prop="cardNo">
				<u-input v-model="form.cardNo" :cursor-spacing="50" input-align="right" placeholder="请填写您的银行卡号" />
			</u-form-item>
			
<!-- 			<u-form-item required label="银行" prop="branchCode">
				<u-input v-model="bankName" :cursor-spacing="50" disabled input-align="right" placeholder="请选择您的银行" @click="bankShow = true" />
			</u-form-item>
			
			<u-form-item required label="银行支行" prop="branchName">
				<u-input v-model="form.branchName" :cursor-spacing="50" disabled input-align="right" placeholder="请选择您的银行支行" @click="handBranchSelect" />
			</u-form-item> -->
			
			<u-form-item required label="银行所在地区" prop="provId">
				<view class="t-r" style="color: #777777;" @click="regionShow = true"><text>{{address || '请选择省市区'}}</text></view>
			</u-form-item>

			<u-form-item label="证件类型">
				<view class="t-r"><text>身份证</text></view>
			</u-form-item>

			<u-form-item :required="form.cardType === 1" label="证件号码" prop="certNo">
				<u-input v-model="form.certNo" :cursor-spacing="50" input-align="right" placeholder="请填写您的证件号码" />
			</u-form-item>

			<u-form-item :required="form.cardType === 1" label="证件有效期类型" prop="certValidityType">
				<u-radio-group v-model="form.certValidityType" active-color="#23bbb3">
					<u-radio v-for="item in IDList" :key="item.value" :name="item.value" label-size="27" icon-size="22">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item :required="form.cardType === 1" label="证件有效期起始日" prop="certBeginDate">
				<view class="t-r" @click="handSeletDate('begin')"><text>{{form.certBeginDate || '请选择证件有效期起始日'}}</text></view>
			</u-form-item>
			
			<u-form-item label="证件有效期到期日" prop="certEndDate">
				<view class="t-r" @click="handSeletDate('end')"><text>{{form.certEndDate || '请选择证件有效期到期日'}}</text></view>
			</u-form-item>
		</u-form>

		<view class="mt60"></view>

		<u-button :disabled="loading" :loading="loading"
			:custom-style="{...customStyle,backgroundColor: loading?'rgba(35,187,175,0.5)':'#23bbb3',}"
			@click="handSubmit">
			提交
		</u-button>
		<u-picker v-model="show" mode="time" @confirm="handConfirmDate"></u-picker>
		<u-picker mode="region" v-model="regionShow" :area-code='["440000", "440300", "440306"]' @confirm="handConfirmRegion"></u-picker>
		<u-select v-model="branchShow" :list="bankBranchList" value-name="branchCode" label-name="branchName" @confirm="handConfirmBranchCode"></u-select>
		<u-popup v-model="bankShow" mode="bottom">
			<view class="_search p30">
				<u-search placeholder="请输入银行名字搜索" show-action v-model="keyword" @search="handRetrieval" @change="handRetrieval" @clear="branchList = []"></u-search>
				<view class="z-flex flex-1" style="flex-direction: column;overflow-y: auto;">
					<template v-if="branchList.length > 0">
						<template v-for="it in branchList">
							<view class="_li" :key="it.value" @click="handSelectCode(it)"><text>{{it.label}}</text></view>
						</template>
					</template>
					<view v-if="branchList.length == 0" class="p30 fs24 c-999 t-c"><text>暂无数据</text></view>
				</view>
			</view>
		</u-popup>
		<!-- <u-button @click="regionShow = true">打开</u-button> -->
	</view>
</template>

<script>
	import { bindCardApi } from './api/index.js'
	import { getBankListApi } from '@/api/index.js'
	const bankList = require('@/libs/bank.json')
	export default {
		data() {
			return {
				bankShow: false,
				branchShow: false,
				show: false,
				regionShow: false,
				dateClass: '',
				customStyle: {
					color: '#ffffff',
					width: '80%',
				},
				loading: false,
				address: '',
				bankName: '',
				branchList: [],
				bankBranchList: [],
				keyword: '',
				form: {
					userId: uni.getStorageSync('userId'),
					cardType: 1, // 用户人类型
					cardName: '', // 持卡人姓名
					cardNo: '', // 银行卡号
					provId: '', // 银行所在省
					areaId: '', // 银行所在市
					// branchCode: '', // 银行号 对公必填
					// branchName: '', // 支行名称 对公时联行号、支行名称二选一必填
					certType: '00',
					certNo: '', // 持卡人证件号码
					certValidityType: '1',
					certBeginDate: '',
					certEndDate: '',
					mp: uni.getStorageSync('phone')
				},
				option: {},
				userTypeList: [{
					name: '对公',
					value: 0
				},{
					name: '对私',
					value: 1
				},{
					name: '对私非法人',
					value: 2
				}],
				IDList: [{
						name: '长期有效',
						value: '1'
					},
					{
						name: '非长期有效',
						value: '0'
					}
				],
				rules: {
					cardName: [{
						required: true,
						message: '请填写持卡人姓名',
						trigger: ['change', 'blur']
					}],
					cardNo: [{
						required: true,
						pattern: /^\d{9,19}$/,
						message: '请填写正确的银行卡号',
						trigger: ['change', 'blur']
					}],
					provId: [{
						required: true,
						message: '请选择省市区',
						trigger: ['change', 'blur']
					}],
					// branchCode: [{
					// 	required: true,
					// 	message: '请选择银行',
					// 	trigger: ['change', 'blur']
					// }],
					// branchCode: [{
					// 	required: true,
					// 	message: '请选择银行',
					// 	trigger: ['change', 'blur']
					// }],
					// branchName: [{
					// 	required: true,
					// 	message: '请选择银行支行',
					// 	trigger: ['change', 'blur']
					// }],
					certNo: [{
						required: true,
						pattern: /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9X]$/,
						message: '请填写正确的证件号码',
						trigger: ['change', 'blur']
					}],
					certBeginDate: [{
						required: true,
						message: '请选择证件有效期起始日',
						trigger: ['change', 'blur']
					}]
				}
			}
		},
		onReady(){
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(option) {
			this.option = option
		},
		onShow() {

		},
		methods: {
			async getBankList(){
				const {code,data} = await getBankListApi({
					bankCode: this.form.branchCode
				})
				if(code != 0) return
				this.bankBranchList = data.list
			},
			handBranchSelect(){
				if(!this.form.branchCode){
					return uni.showToast({
						title: '请先选择银行编号',
						icon: 'none'
					})
				}
				
				this.branchShow = true
			},
			handRetrieval(e){
				if(this.keyword.length > 1){
					this.branchList = bankList.filter(it=>{return it.label.indexOf(this.keyword) > -1})
				}
			},
			handSelectCode(e){
				this.form.branchCode = e.value
				this.bankName = e.label
				this.bankShow = false
				// this.keyword = ''
				// this.branchList = []
				this.getBankList()
			},
			handConfirmRegion(e){
				const {province,city,area} = e
				this.form.provId = province.code
				this.form.areaId = city.code
				this.address = `${province.name}${city.name}${area.name}`
			},
			handConfirmBranchCode(e){
				this.form.branchCode = e[0]['value']
				this.form.branchName = e[0]['label']
			},
			handConfirmDate(e){
				const {year,month,day} = e
				const time = `${year}${month}${day}`
				switch (this.dateClass){
					case 'begin':
					this.form.certBeginDate = time
						break;
					default:
					this.form.certEndDate = time
						break;
				}
			},
			handSeletDate(e){
				this.dateClass = e
				this.show = true
			},
			async handSubmit() {
				this.$refs.uForm.validate(async (valid) => {
					if(valid){
						this.loading = true
						try{
							uni.showLoading({
								title: '绑卡中...'
							})
							const {code,data} = await bindCardApi(this.form)
							if(code == 0){
								uni.showToast({
									title: '绑卡成功'
								})
								setTimeout(()=>{
									uni.navigateBack()
								},1000)
							}
						}catch(e){
							
						}
						this.loading = false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: 100vh;
		overflow: auto;
		._search{
			height: 600rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
		}
		
		._li{
			padding: 26rpx 0;
			font-size: 26rpx;
			color: #666666;
			border-bottom: 1rpx solid #f2f2f2;
		}
	}
</style>